<template>
    <div :class="[
    'el-row',
    { 'el-row--flex': type === 'flex'},
    justify !== 'start' && `is-justify-${justify}`
    ]"
    :style="styles">

        <slot></slot>
    </div>
</template>
/**
如果不等于start,就添加is-justify-${justify}这个类 */
<script>
export default {
  name: 'ElRow',
  props: {
    gutter: {
      type: Number,
      default: 0,
    },
    type: String,
    justify: {
      type: String,
      default: 'start',
      validator: (val) => ['start', 'end', 'space-around', 'space-between', 'center'].includes(val),
    },
    align: {
      type: String,
      default: 'top',
      validator: (val) => ['top', 'middle', 'bottom'].includes(val),
    },
  },
  computed: {
    styles() {
      const styles = {};
      styles.marginLeft = `-${this.gutter / 2}px`;
      styles.marginRight = styles.paddingLeft;
      return styles;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row{
    &::before,&::after{
        content: '';
        display: block;
    }
    &::after{
        clear: both;
    }
    &--flex {
        display: flex;

        &::before,
        &::after {
            display: none;
        }
        &.is-justify-end{
            justify-content: flex-end;
        }
        &.is-justify-space-between{
            justify-content: space-between;
        }
        &.is-justify-space-around{
            justify-content: space-around;
        }
        &.is-justify-center{
            justify-content: center;
        }
        &.is-align-bottom{
            align-items: flex-end;
        }
        &.is-align-middle{
            align-items: center;
        }
    }
}

</style>
